/**
 * 搜索历史组件
 */
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity
} from 'react-native';
import { px2dp } from 'rn-xiaobu-utils';
import flexStyle from '../../../configs/flex';
import Icon from '../../public/icon';
import NavigationService from '../../../utils/NavigationService';
import fontsize from '../../../configs/fontsize';

export default class SearchHistoryItem extends Component {
  /**
   * 跳转线路规划页
   */
  goToRoutePlan = () => {
    NavigationService.navigate('RoutePlan', {
      start: this.props.start,
      end: this.props.end
    })
  }

  render () {
    return (
      <TouchableOpacity style={[styles.container, flexStyle.flexH, flexStyle.flexVc]} onPress={this.goToRoutePlan}>
        <Icon name={'search'} color={'#999999'}
          size={28}/>
        <Text style={[styles.text, fontsize.fontsize28]} numberOfLines={2}>{this.props.start.name}&nbsp;<Icon name={'next'} color={'#999999'}
          size={20}/>&nbsp;{this.props.end.name}</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: px2dp(100),
    backgroundColor: '#ffffff',
    paddingLeft: px2dp(40),
    paddingRight: px2dp(80)
  },
  text: {
    marginLeft: px2dp(20)
  }
});